import { createBrowserRouter, Navigate, } from "react-router-dom";
import { lazy, Suspense, FC, } from "react";
import Home from "@/Views/Home/Home";
import App from "@/App";
import Login from "@/Views/Login/Login";
import Error from "@/Views/404/404";
import { Skeleton } from 'antd';
import { Admin } from "@/utils/local"
const rs = Admin.get_Admin()
const Skeletons = <Skeleton active />;
//前台
const About = lazy(() => import("@/Views/Category/Category"));
const Test = lazy(() => import("@/Views/User/User"));
const Mainfood = lazy(() => import("@/Views/Category/Mainfood"));
const Bake = lazy(() => import("@/Views/Category/Bake"));
const Beverage = lazy(() => import("@/Views/Category/Beverage"))
const Soup = lazy(() => import("@/Views/Category/Soup"))
const EeditUser = lazy(() => import("@/Views/Edits/UserEdit"))
const Datile = lazy(() => import("@/Views/Detail_Food"))
const Edit_Food = lazy(() => import("@/Views/Edits/Edit_Food"))
//后台管理
const Back = lazy(() => import("@/Views/Backstage"))
const Screen = lazy(() => import("@/Views/Backstage/DateScreen"))
const Users = lazy(() => import("@/Views/Backstage/Users"))
const Food = lazy(() => import("@/Views/Backstage/Food"))
const Discuss = lazy(() => import("@/Views/Backstage/Discuss"))
const lazyComponent = (Component: FC) => {
    return <Suspense fallback={Skeletons}>
        <Component />
    </Suspense>
}
const routers = [
    {
        path: '/',
        element: <Navigate to="/home" />
    },
    {
        path: "/",
        element: <App />,
        children: [
            {
                path: "/home",
                element: lazyComponent(Home),
            },
            {
                path: "/category",
                element: lazyComponent(About),
                children: [
                    {
                        path: "/category",
                        element: <Navigate to={'/category/mainfood'}></Navigate>
                    },
                    {
                        path: "mainfood",
                        element: lazyComponent(Mainfood)
                    },
                    {
                        path: "bake",
                        element: lazyComponent(Bake)
                    },
                    {
                        path: "beverage",
                        element: lazyComponent(Beverage)
                    },
                    {
                        path: "soup",
                        element: lazyComponent(Soup)
                    }
                ]
            }, {
                path: "/user",
                element: lazyComponent(Test),

            }, {
                path: "/edituser",
                element: lazyComponent(EeditUser)
            },
            {
                path: "/editfood",
                element: lazyComponent(Edit_Food)
            }

        ]
    },
    {
        path: "/detaile/:id",
        element: lazyComponent(Datile)
    },
    {
        path: "/login",
        element: <Login></Login>

    },
    {
        path: "/backstage",
        element: lazyComponent(Back),
        name: "back",
        children: [
            {
                path: "/backstage",
                element: <Navigate to="/backstage/screen"></Navigate>
            },
            {
                path: "screen",
                element: lazyComponent(Screen)
            },

        ]
    },
    {
        path: "*",
        element: <Error></Error>
    }
]
const dtRoute = [
    {
        path: "users",
        element: lazyComponent(Users),
        id: '4-2'
    },
    {
        path: "food",
        id: '4-3',
        element: lazyComponent(Food)
    },
    {
        path: "discuss",
        id: '4-4',
        element: lazyComponent(Discuss)
    }
]
const route = createBrowserRouter(routers)
export function addrouter(users: any[]) {
    const baseRouter = route.routes.find((rt: any) => rt.name === "back")
    console.log(baseRouter)
    if (users.length !== 0) {
        for (const use of users) {

            for (const rt of dtRoute) {
                if (rt.path === use.key) {
                    baseRouter?.children?.push(rt)
                } else {

                }
            }
        }
    } else {
        baseRouter?.children?.splice(2)
    }
}
if (rs) {
    addrouter(rs.pression)
}
export default route;

